<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>商品管理</title>

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 

</head>
<body>
<!-- <div class="demoTable" id="toolbarDemo1">
  编号：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="pgid" autocomplete="off">
  </div>
  套餐标题：
   <div class="layui-inline">
    <input class="layui-input" name="comboTitle" id="comboTitle" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div> -->
<!-- @*Table表格层*@ -->
<!-- @*创建一个table实例   在页面放置一个元素 ，然后通过 table.render() 方法指定该容器 -->
<table class="layui-hide" id="test" lay-filter="test"></table>



<!-- 工具栏 -->
<script type="text/html" id="toolbarDemo">
  <div class="demoTable" >
  编号：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="pgid" autocomplete="off">
  </div>
  套餐标题：
   <div class="layui-inline">
    <input class="layui-input" name="comboTitle" id="comboTitle" autocomplete="off">
  </div>
  <button class="layui-btn"  id="search" data-type="reload">搜索</button>

</div>
</script>


<!-- @*工具栏  在Table中使用 toolbar声明一个 Id  放置在任意位置皆可*@ -->
<script type="text/html" id="barDemo">
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="getCheckData" id="btn">加入购物车</button>
</script>

<!-- 表格数据的商品状态列显示值转换 -->             
<script type="text/html" id="statetemplet">
{{# if(d.state=="1"){"上架"}}
<span style="color:chocolate;">{{"上架"}}</span>
{{# } else {"下架"}}
<span style="color:black;">{{"下架"}}</span>
{{#　}}}
</script>  

 
<script>
//创建实例  要想数据初始化 这里必须要写
layui.use(['table', 'layer', 'form','jquery'], function () {
	var table = layui.table;
	layer = layui.layer;
	form = layui.form;
	$=layui.jquery;
	TableInit();
	//表格内容
	function TableInit(){
	table.render({
		elem: '#test'  //表格容器的id
		,url:'comboShop.do'  
			//接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
		,even: true  //隔行换色，默认false不开启
		,toolbar: '#toolbarDemo'
		,title: '商品信息数据表'
		,cols: [[
			/* {type: 'checkbox', fixed: 'left'}
			, */{field:'pgid', title:'套餐编号', width:100, fixed: 'left', unresize: true, sort: true}
			,{field:'pgname', title:'套餐名称', width:180, edit: 'text'}
			,{field:'pgtype', title:'套餐类型', width:100, edit: 'text', sort: true}
			,{field:'marketprice', title:'套餐市场价', width:100, sort: true}
			,{field:'price', title:'套餐优惠价',width:80, sort: true}
			,{field:'state', title:'状态', width:70, sort: true, templet:"#statetemplet"}
			,{field:'introduction', title:'商品说明', width:170}
			,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
		]]
		,page: true  //开启分页
		/*,page: { //自定义分页，支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem）
			layout: ['first','prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
		    //,curr: 1 //设定初始在第 1 页
		    ,groups: 3 //只显示 3 个连续页码
		    ,first: '首页' //false不显示首页
		    ,last: '尾页' //false不显示尾页
		} */
		,limit: 10  //设置一页数据数量
		,limits: [5,10,15,20,'${res.count }'] //设置分页选项
		,request: {  //请求的参数
			pageName: 'page' //页码的参数名称，默认：page
		    ,limitName: 'limit' //每页数据量的参数名，默认：limit
		}
		,response: {  //自定义返回的数据格式
			statusName: 'code' //规定数据状态的字段名称，默认：code
			,statusCode: 0 //规定成功的状态码，默认：0
			,msgName: 'msg' //规定状态信息的字段名称，默认：msg
			,countName: 'count' //规定数据总数的字段名称，默认：count
			,dataName: 'data' //规定数据列表的字段名称，默认：data
		} 
	});

	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
		switch(obj.event){
		case 'getCheckData':
			var data = checkStatus.data;
			alert(data);
		    data = JSON.stringify(data);//表格数据序列化
			alert(data);
			//layer.msg(data);
		    
		    $.ajax({
		    	//alert(1);
				url:'<%=basePath%>addComboShopping.do',   //接口
		        type:'post',//method请求方式，get或者post
		        dataType:'json',//预期服务器返回的数据类型
		        data:JSON.stringify({"data":data}),//序列化表格数据
		        contentType: "application/json; charset=utf-8",
		        success: function(res){//res为相应体,function为回调函数
		        	if (res.code == 1) {
						layer.msg({ icon: 1, time: 1500 });
						layer.alert("成功添加购物车");
			            //layer.close(index);  //关闭弹窗
					} else{
						layer.msg({ icon: 2, time: 1500 });
						//layer.alert(res.msg, {icon: 5});
					}
		        },
		        error: function(){
		        	layer.msg("操作失败", { icon: 2 });
		        }
			}); 
			return false;//阻止表单跳转。如果需要表单跳转,去掉这段即可，但会影响弹框效果。
			
			
			break;
		case 'getCheckLength':
			var data = checkStatus.data;
			layer.msg('已选中：'+ data.length + ' 个');
			break;
		case 'isAll':
			layer.msg(checkStatus.isAll ? '全选': '未全选');
			break;
		case 'add':
			layer.open({
				type: 2,
				title: '添加商品',
				skin: 'layui-layer-molv',
				shadeClose: false,
				shade: 0.8,
				area: ['50%', '70%'],
				content: '<%=basePath%>/m_admin/addproduct.jsp',//跳转的页面
				cancel: function (index) {
				    $(".layui-laypage-btn").click();//这里用于关闭Open时触发回调函数  刷新父页面数据  一定要引入Jquery
				}
			});
			break;
		};
	});
	}

	search();
	//搜索 ----------------------------------------------- Begin-----------------------------------------------------------
	function search(){
	var $ = layui.$, active =
	  {
	      reload: function () {
	          var pgid = $("input[name='id']").val();//获取输入框的值
	          alert(pgid);
	          var comboTitle=$("input[name='comboTitle']").val();
	          //执行重载
	          table.reload('test',{
	          	page: {curr: 1 }  //重新从第 1 页开始
	            , where: { pgid: pgid,pgname:comboTitle}  //向后台传参  
	            , url: 'comboShop.do'  //后台做模糊搜索接口路径
	            , method: 'post'
	          });
	      }
	  };
	//这个是用于创建点击事件的实例
	$('#search').on('click', function (){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	});
	}
	//搜索 ----------------------------------------------- End-----------------------------------------------------------
	
	//监听工具条 ----------------------------------------------- Begin-----------------------------------------------------------
	table.on('tool(test)', function (obj) {    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data; //获得当前行数据
	    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    var tr = obj.tr; //获得当前行 tr 的DOM对象 
	    
	    if (layEvent=='getCheckData'){  
	    	$.ajax({
	    		url:"<%=basePath%>addComboShopping.do",//接口
	            type:'post',//method请求方式，get或者post
	            dataType:'json',//预期服务器返回的数据类型
	            data:JSON.stringify(data),//表格数据序列化
	            contentType: "application/json; charset=utf-8",  
	            success: function(res){//res为相应体,function为回调函数
	            	if (res == 1) {
	    				//layer.msg(res.msg, { icon: 1, time: 1500 });
	    				layer.alert("成功添加购物车",{ icon: 1, time: 1500 });
	    	            //layer.close(index);  //关闭弹窗
	    			} else{
	    				//layer.msg(res.msg, { icon: 2, time: 1500 });
	    				layer.alert("添加失败",{ icon: 2, time: 1500 });
	    			}
	            },
	            error: function(){
	            	layer.msg("操作失败", { icon: 2 });
	            } 
	    	}); 
	    }
    });
	//监听工具条 ----------------------------------------------- ENd-----------------------------------------------------------
	
});

</script>

</body>
</html>